<template>
  <div class="meeting-room-selection">
    <el-select
      v-model="localValue"
      :clearable="clearable"
      :disabled="disabled"
      :filterable="filterable"
      :loading="loading"
      :multiple="multiple"
      :placeholder="placeholder"
      style="width: 100%"
    >
      <el-option v-for="option in options" :key="option.value" :disabled="option.disabled" :label="option.label" :value="option.value">
        <div class="meeting-room-option">
          <div class="room-info">
            <div class="room-name">{{ option.label }}</div>
            <div v-if="option.capacity" class="room-capacity">容量: {{ option.capacity }}人</div>
          </div>
          <div v-if="option.status" class="room-status" :class="option.status">
            {{ getRoomStatusText(option.status) }}
          </div>
        </div>
      </el-option>
    </el-select>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

// 定义组件属性
interface RoomOption {
  label: string
  value: string | number
  capacity?: number
  status?: 'available' | 'occupied' | 'maintenance'
  disabled?: boolean
}

interface Props {
  modelValue: string | number | (string | number)[] | null
  options: RoomOption[]
  multiple?: boolean
  filterable?: boolean
  placeholder?: string
  clearable?: boolean
  disabled?: boolean
  loading?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  multiple: false,
  filterable: true,
  placeholder: '请选择会议室',
  clearable: true,
  disabled: false,
  loading: false,
})

const emit = defineEmits<{
  (e: 'update:modelValue', value: any): void
  (e: 'change', value: any): void
}>()

// 内部值
const localValue = computed({
  get: () => props.modelValue,
  set: (value) => {
    emit('update:modelValue', value)
    emit('change', value)
  },
})

// 获取会议室状态文本
const getRoomStatusText = (status: string) => {
  switch (status) {
    case 'available': {
      return '可用'
    }
    case 'occupied': {
      return '已占用'
    }
    case 'maintenance': {
      return '维护中'
    }
    default: {
      return ''
    }
  }
}
</script>

<style scoped>
.meeting-room-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.room-info {
  display: flex;
  flex-direction: column;
}

.room-name {
  font-weight: 500;
}

.room-capacity {
  font-size: 12px;
  color: #909399;
}

.room-status {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
}

.room-status.available {
  background-color: #f0f9eb;
  color: #67c23a;
}

.room-status.occupied {
  background-color: #fef0f0;
  color: #f56c6c;
}

.room-status.maintenance {
  background-color: #fdf6ec;
  color: #e6a23c;
}
</style>
